<template>
	<view class="swiper-view">
		<swiper class="swiper" :indicator-dots="indicatorDots" 
					:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item class="swiper-item" v-for="c in swipers">
				<view class="swiper-item-view">
					<image :src="c" ></image></view>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"ComponentSwiper",
		//props:["swipers"],
		
		data() {
			return {
				swipers:[
					"https://static1.keepcdn.com/picture/2021/05/20/12/49/29f54ae172bcc6a256c9a197d303c32105b46b9e_620x466.jpg?imageView2/1/format/webp/ignore-error/1",
					"https://static1.keepcdn.com/cms_static/picture/2021/4/9/1617950115840_JUU2JUIwJTk0JUU4.jpg?imageMogr2/thumbnail/600x",
					"https://static1.keepcdn.com/picture/2021/05/17/19/49/7c7891c29ca17463557cdbcabf13604068ae6a76_1080x810.jpg?imageView2/1/format/webp/ignore-error/1",
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
			};
		}
	}
</script>

<style>
	.swiper-view,swiper,swiper-item{
		width: 100%;
		height: 350rpx;
		overflow-y: hidden;
	}
	.swiper-item image{
		width: 100%;
	}
</style>
